<!DOCTYPE html>
<html lang="zh_CN">
<head>

<!--   from github  -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./asserts/plugins/Bootstrap/css/bootstrap.css">
<!--    首页样式-->
    <link rel="stylesheet" href="asserts/css/app.css">
    <link rel="stylesheet" href="asserts/css/animate.css">


    <title>音乐商城</title>
</head>
<body>
<!--    导航    -->
<!--                                    固定顶部-->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <!--        小屏幕导航按钮和logo-->
        <div class="navbar-header">
<!--                                            数据收缩                          绑定指定类-->
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="index.html" class="navbar-brand" >麦田音乐</a>
        </div>
        <!--        小屏幕导航按钮和logo-->

        <!--    大屏幕导航-->
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#home">首页</a></li>
                <li><a href="#bbs">合作平台</a></li>
                <li><a href="#html">版权购买</a></li>
                <li><a href="#course">版权资讯</a></li>
                <li><a href="#contact">联系我们</a></li>
                <li><a href="login.html">用户登录</a></li>
                <li><a href="login.html">注销</a></li>
                <li><a href="manger.html">查看后台</a></li>

            </ul>
        </div>
        <!--    大屏幕导航-->
</div>
</nav>
<!--    导航    -->

<!--    home-->
<section id="home">
    <div class="lj">
        <div class="container">
            <div class="row wow fadeInUp" data-wow-delay="1s" data-wow-duration="1s">
                <div class="col-md-1"></div>
                <div class="col-md-10">
                    <h1>HELLO 麦田</h1>
                    <p>
                        麦田音乐 只做音乐
                        <br>
                        麦田音乐人 永远纯粹的音乐人
                    </p>
<!--                    <img src="asserts/img/home/home-1.jpeg" class="img-responsive" alt="麦田">-->
                </div>
                <div class="col-md-1"></div>
            </div>
        </div>
    </div>
</section>
<!--home-->

<!--bbs 论坛-->
<section id="bbs">
    <div class="container">
        <div class="row wow fadeInUp">
            <div class="col-md-4">
                <a href="http://www.baidu.com" target="_blank">
                    <img class="img-responsive" src="asserts/img/bbs/kg.jpeg" alt="">
                    <h5 style="margin-top: 45px;">酷狗音乐</h5>
                    <p>聆听天籁的声音</p>
                </a>
            </div>
            <div class="col-md-4">
<!--                                            新窗口打开-->
                <a href="http://www.baidu.com" target="_blank">
<!--                                居中-->
                    <img  class="img-responsive" src="asserts/img/bbs/wyy.jpeg" alt="">
                    <h5 style="margin-top: 45px;">网易云音乐</h5>
                    <p>听懂了 世界就是你的</p>
                </a>
            </div>
            <div class="col-md-4">
                <a href="http://www.baidu.com" target="_blank">
                    <img class="img-responsive" src="asserts/img/bbs/QQyy.jpeg" alt="">
                    <h5 style="margin-top: 45px;">QQ音乐</h5>
                    <p>用音乐链接世界</p>
                </a>
            </div>
        </div>
    </div>
</section>
<!--bbs-->

<!--html -->
<section id="html">
   <div class="container">
      <div class="row">
          <div class="col-md-6 wow fadeInLeft">
             <h2>荣誉合伙人 - 李俊熙先生</h2>
              <p class="html_1"><span class="glyphicon glyphicon-headphones"></span>&nbsp;&nbsp;麦田音乐总裁</p>
              <p class="html_1_1"><span class="glyphicon glyphicon-grain maizi"></span>国家一级音乐指挥家 巴赫音乐奖获得者</p>
              <p class="html_1_1"><span class="glyphicon glyphicon-grain maizi"></span>天空合唱团长 中央音乐学院教授</p>
              <p class="html_1_1"><span class="glyphicon glyphicon-grain maizi"></span>主要负责麦田大中华区音乐兼制 版权发行</p>
          </div>
          <div class="col-md-6 wow fadeInRight">
              <img style="width: 440px;"class="img-responsive" src="asserts/img/html/yinyue.jpg" alt="">
          </div>
      </div>
   </div>
</section>
<!--html-->

<!--bootstrap-->
<!--<section id="html2">
    <div class="container">
        <div class="row">
            <div class="col-md-6 wow fadeInRight">
                <h2>音乐合伙人 - 威廉 大卫先生</h2>
                <p class="html_1"><span class="glyphicon glyphicon-headphones"></span>&nbsp;&nbsp;麦田音乐总经理</p>
                <p class="html_1_1"><span class="glyphicon glyphicon-grain maizi"></span>巴黎音乐学院院长 维也纳管弦乐负责人</p>
                <p class="html_1_1"><span class="glyphicon glyphicon-grain maizi"></span>世界音乐委员会古典乐主干事 香港大学音乐学院客座教授</p>
                <p class="html_1_1"><span class="glyphicon glyphicon-grain maizi"></span>主要负责麦田全球音乐兼制 版权发行 名人音乐演唱</p>
            </div>
            <div class="col-md-6 wow fadeInLeft">
                <img style="width: 440px;" class="img-responsive" src="./asserts/img/html/wyn.jpeg" alt="">
            </div>
        </div>
    </div>
</section>-->
<!--bootstrap-->

<!--course-->
<section id="course">
    <div class="container wow fadeIn" data-wow-delay="0.6s">
        <div class="row">
            <h1>版权购买</h1>
        </div>
        <div class="row">
            <div class="col-md-3">
                <div class="course">
                    <img src="./asserts/img/course/img.png" class="img-responsive" alt="">
                    <a href="http://www.baidu.com" target="_blank" class="btn btn-primary" role="button">获取版权</a>
                </div>
            </div>
            <div class="col-md-3">
                <div class="course">
                    <img src="./asserts/img/course/02.png" class="img-responsive" alt="">
                    <a href="http://www.baidu.com" target="_blank" class="btn btn-primary" role="button">获取版权</a>
                </div>
            </div>
            <div class="col-md-3">
                <div class="course">
                    <img src="./asserts/img/course/03.png" class="img-responsive" alt="">
                    <a href="http://www.baidu.com" target="_blank" class="btn btn-primary" role="button">获取版权</a>
                </div>
            </div>
            <div class="col-md-3">
                <div class="course">
                    <img src="./asserts/img/course/04.png" class="img-responsive" alt="">
                    <a href="http://www.baidu.com" target="_blank" class="btn btn-primary" role="button">获取版权</a>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <div class="course">
                    <img src="./asserts/img/course/05.png" class="img-responsive" alt="">
                    <a href="http://www.baidu.com" target="_blank" class="btn btn-primary" role="button">获取版权</a>
                </div>
            </div>
            <div class="col-md-3">
                <div class="course">
                    <img src="./asserts/img/course/06.png" class="img-responsive" alt="">
                    <a href="http://www.baidu.com" target="_blank" class="btn btn-primary" role="button">获取版权</a>
                </div>
            </div>
            <div class="col-md-3">
                <div class="course">
                    <img src="./asserts/img/course/07.png" class="img-responsive" alt="">
                    <a href="http://www.baidu.com" target="_blank" class="btn btn-primary" role="button">获取版权</a>
                </div>
            </div>
            <div class="col-md-3">
                <div class="course">
                    <img src="./asserts/img/course/08.png" class="img-responsive" alt="">
                    <a href="http://www.baidu.com" target="_blank" class="btn btn-primary" role="button">获取版权</a>
                </div>
            </div>
        </div>
    </div>
</section>
<!--course-->

<!--app-->
<section id="app">
    <div class="container wow fadeInUp">
        <div class="col-md-6">
           <h2>&nbsp;麦田版权资讯APP下载</h2>
<!--                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;全新应用 全新视听</p>-->
            <button class="btn btn-primary">
                <span class="glyphicon glyphicon-download-alt">IOS下载</span>
            </button>
            <button class="btn btn-primary">
                <span class="glyphicon glyphicon-download-alt">Andriod下载</span>
            </button>
        </div>
        <div class="col-md-6">
            <div class="app-image">
                <img src="images/app/app.jpg" class="img-responsive" alt="">
            </div>
        </div>
    </div>
</section>
<!--app-->

<!--contact-->
<section id="contact">
    <div class="lj">
    <div class="container">
        <div class="row">
            <div class="col-md-6 wow fadeInLeft">
                <h2><span class="glyphicon glyphicon-send"></span>&nbsp;联系麦田</h2>
                <p>
                    麦田音乐一直致力于中国音乐版权事业的推进<br>
                    尊重每一位原创音乐人的梦想<br>
                    希望把中国音乐推向世界舞台
                </p>
                <address>
                    <p><span class="glyphicon glyphicon-home"></span>&nbsp;地址：广州市花都区渝州路月天大厦101-109层</p>
                    <p><span class="glyphicon glyphicon-earphone"></span>&nbsp;联系电话：090-22333222</p>
                    <p><span class="glyphicon glyphicon-envelope"></span>&nbsp;邮箱：nb@google.com</p>
                </address>
            </div>
            <div class="col-md-6 wow fadeInRight">
                <form action="#" class="form" method="post">
                    <div class="row">
                        <div class="col-md-6">
                            <input type="text" class="form-control" placeholder="您的姓名" name="name">
                        </div>
                        <div class="col-md-6">
                            <input type="text" class="form-control" placeholder="您的邮箱" name="email">

                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <input type="text" class="form-control" placeholder="标题" name="title">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <textarea name="body" placeholder="您的意见" class="form-control"></textarea>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-8">
                            <input type="submit" class="form-control" value="提交">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    </div>
</section>
<!--contact-->

<!--footer-->
<footer id="footer">
   <div class="container">
       <div class="row">
           <div class="col-md-12">
               <p>
                   麦田音乐版权所有 © 2001-2021 粤ICP备09200185号
               </p>
           </div>
       </div>
   </div>
</footer>
<!--footer-->

<!--必须先写，因为载入页面之后加载JS-->
<!-- jQuery文件,务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.4/jquery.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="./asserts/plugins/Bootstrap/js/bootstrap.js"></script>
<script src="./asserts/plugins/Bootstrap/js/singlePageNav.js"></script>
<script src="./asserts/plugins/Bootstrap/js/wow.min.js"></script>
<script >
    $(function(){
       $(".nav").onePageNav();
       $(".navbar-collapse a").click(function () {
          $(".navbar-collapse").collapse('hide');
       });
       new WOW().init()
    })
</script>
</body>
</html>